<template>
  <div class="container">
    <div class="desc">
      <el-card class="box-card" shadow="hover">
        <div slot="header" class="clearfix">
          <h3>基本信息</h3>
        </div>
        <div>
          <div>任务名称：{{ data.taskName }}</div>
          <div>
            任务类型:
            <span v-for="dict in dict.type.all_tasktype" :key="dict.value">
              <!-- {{ dict.value ==  ? dict.label : "" }} -->
              {{ dict.value == data.jobType ? dict.label : "" }}
            </span>
          </div>
          <div>开始时间:{{ data.startTime }}</div>
          <div>完成时间:{{ data.endTime }}</div>
          <div>耗时:{{ taskResult.timeConsuming }}</div>
        </div>
      </el-card>
      <el-card shadow="hover" class="box-card">
        <div slot="header" class="clearfix">
          <h3>兼容条数</h3>
        </div>
        <div style="margin-top: 5%">
          <div style="font-size: 35px">
            {{ taskResult.compatibleSize }}
          </div>
          <p>总条数</p>
        </div>
      </el-card>
      <el-card shadow="hover" class="box-card">
        <div slot="header" class="clearfix">
          <h3>转换条数</h3>
        </div>
        <div style="margin-top: 5%">
          <div style="font-size: 35px">
            {{ taskResult.convertSize }}
          </div>
          <p>总条数</p>
        </div>
      </el-card>
      <el-card shadow="hover" class="box-card">
        <div slot="header" class="clearfix">
          <h3>兼容百分比</h3>
        </div>
        <div style="margin-top: 5%">
          <div style="font-size: 35px">
            {{ taskResult.compatiblePercent }}
          </div>
        </div>
      </el-card>
    </div>
    <div class="compatibleBox">
      <el-card shadow="hover" class="box-card">
        <div slot="header" class="clearfix">
          <h3>兼容性预览</h3>
        </div>
        <div class="compatiblePreview">
          <Echarts
            id="compatible"
            width="1000px"
            height="350px"
            :options="option"
          />
          <div class="compatiblePreviewRight">
            <div class="compatiblePreviewRightText">
              <p>{{ taskResult.compatiblePercent }}</p>
              <span>兼容性百分比</span>
              <el-progress
                :text-inside="true"
                :stroke-width="24"
                :percentage="Number(taskResult.compatiblePercent.split('%')[0])"
                status="success"
              ></el-progress>
            </div>
            <div class="compatiblePreviewRightText">
              <p style="font-size: 20px">
                总条数:
                <span
                  style="
                    display: inline-block;
                    font-size: 20px;
                    font-weight: 500;
                  "
                  >{{ taskResult.allSize || 0 }}条</span
                >
              </p>
            </div>
            <!-- allSize -->
            <div class="compatiblePreviewRightText">
              <p style="font-size: 20px">
                转换条数:
                <span
                  style="
                    display: inline-block;
                    font-size: 20px;
                    font-weight: 500;
                  "
                  >{{ taskResult.convertSize }}条</span
                >
              </p>
            </div>
            <div class="compatiblePreviewRightText">
              <p style="font-size: 20px">
                未知条数:
                <span
                  style="
                    display: inline-block;
                    font-size: 20px;
                    font-weight: 500;
                  "
                  >{{ taskResult.unKnownSize }}条</span
                >
              </p>
            </div>
            <div class="compatiblePreviewRightText">
              <p style="font-size: 20px">
                不兼容条数:
                <span
                  style="
                    display: inline-block;
                    font-size: 20px;
                    font-weight: 500;
                  "
                  >{{ taskResult.unCompatibleSize }}条</span
                >
              </p>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import Echarts from "./echarts.vue";

export default {
  props: ["datas"],
  dicts: ["appraise_countmode", "appraise_taskmode", "all_tasktype"],

  components: { Echarts },
  name: "basicOne",
  data() {
    return {
      option: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        legend: {
          data: ["兼容性", "总条数"],
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisPointer: {
              type: "shadow",
            },
            axisLabel: {
              interval: 0,
              lineHeight: 18,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "兼容性",
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
              formatter: "{value} %",
            },
          },
          {
            type: "value",
            name: "总条数",
            min: 0,
            max: 10,
            interval: 2,
            axisLabel: {
              formatter: "{value} 条",
            },
          },
        ],
        series: [
          {
            name: "兼容性",
            type: "bar",
            yAxisIndex: 0,
            tooltip: {
              valueFormatter: function (value) {
                return value + " %";
              },
            },
            data: [],
          },
          {
            name: "总条数",
            type: "bar",
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + " 条";
              },
            },
            data: [],
          },
        ],
      },
      activeIndex: "1",
      data: null,
      taskResult: {},
    };
  },
  created() {
    this.data = this.$props.datas;
    this.taskResult = JSON.parse(this.$props.datas.taskResult).data;
    this.gainEchartsData();
  },
  methods: {
    gainEchartsData() {
      let max = 0;
      let xEl = [
        { label: "表评估结果", value: "tableResult" },
        { label: "视图评估结果", value: "viewResult" },
        { label: "触发器评估结果", value: "triggerResult" },
        { label: "存储过程评估结果", value: "procedureResult" },
        { label: "索引评估结果", value: "indexResult" },
        { label: "序列评估结果", value: "seqResult" },
        { label: "同义词评估结果", value: "synonymResult" },
        { label: "函数评估结果", value: "functionResult" },
        { label: "类型评估结果", value: "typeResult" },
      ];
      xEl.forEach((f) => {
        if (!this.taskResult[f.value]) return;
        if (this.taskResult[f.value].allSize > max) {
          max = this.taskResult[f.value].allSize || 0;
        }
        if (this.taskResult[f.value]) {
          this.option.xAxis[0].data.push(f.label);
          this.option.series[0].data.push(
            this.taskResult[f.value].compatiblePercent.split("%")[0]
          );
          this.option.series[1].data.push(this.taskResult[f.value].allSize);
        }
      });
      if (String(max).length == 1) {
        this.option.yAxis[1].max = 10;
        return;
      }
      let integerBit = String(max)[0];
      integerBit =
        (Number(integerBit) + 1) * Math.pow(10, String(max).length - 1);
      this.option.yAxis[1].max = integerBit;
      this.option.yAxis[1].interval = Math.floor(integerBit / 5);
    },
    handleSelect(key, keyPath) {},
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;

  h3 {
    margin: 5px 0;
    color: #5c5c5c;
    font-weight: 600;
    font-size: 16px;
  }

  p {
    margin: 0;
    padding: 0;
  }

  .desc {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .box-card {
      width: 25%;
      margin: 20px;
      height: 200px;

      p {
        font-size: 14px;
      }
    }
  }
  .compatibleBox {
    width: 100%;
    padding: 15px 20px;

    .compatiblePreview {
      display: flex;

      .compatiblePreviewRight {
        width: 40%;
        padding-right: 30px;

        .compatiblePreviewRightText {
          margin-top: 10px;

          p {
            font-weight: 600;
            font-size: 28px;
            color: rgba(0, 0, 0, 0.6);
          }

          span {
            font-size: 14px;
            color: rgba(0, 0, 0, 0.6);
            margin: 7px 0;
            display: block;
          }
        }
      }
    }
  }
}
</style>
